<template>
  <view>
    <view class="u-block">
      <view class="title">
        实时监测数据
      </view>
      <view class="content">
        <u-line  ></u-line>
        <u-row customStyle="margin: 15px 0px" v-for="(item, index) in currentDataList"
               :key="index">
          <u-col span="3" customStyle="color:#999999" >
            <view >{{item.pointName}}</view>
          </u-col>
          <u-col span="3"  customStyle="text-align:center">
            <view >{{item.value}}{{ item.unit}}</view>
          </u-col>
          <u-col span="6" customStyle="text-align:right">
            <view >{{item.lastUpdated}} </view>
          </u-col>
        </u-row> 
      </view>
    </view>
    <u-gap height="15" customStyle="background-color: Rgb(250,250,250)"></u-gap>
    <view class="u-block ">
      <view class="title">
        历史监测数据
      </view>
      <view class="content">
        <u-line></u-line>
        <view  class="sub-title">
          数据时间范围
        </view>
        <view class="u-form_content">
          <view
              class="u-page__tag-item"
              v-for="(item, index) in dateDruingList"
              :key="index"
          >
            <u-tag
                :text="item.text"
                :plain="!item.checked"
                shape="circle"
                type="warning"
                :name="index"
                @click="handDateClick"
            >
            </u-tag>
          </view>
        </view>
        <view class="u-demo-block__content">
          <view class="sub-title" >
            自定义时间
          </view>
          <view class="u-form_content">
            <view  @click="startTimeshow=true;" ><u--input
                placeholder="开始时间"
                border="surround"
                v-model="selfTimeDuring.start"
                suffixIcon="calendar-fill"
                readonly
            ></u--input>
            </view>
            至
            <view  @click="endTimeShow=true;" >
              <u--input
                  placeholder="结束时间"
                  border="surround"
                  v-model="selfTimeDuring.end"
                  readonly
                  suffixIcon="calendar-fill"
              ></u--input> </view>
          </view>
        </view>
        <view class="u-demo-block__content">
          <view class="sub-title" >
            选择监测项目
          </view>
          <view class="u-form_content">
            <view class="u-page__checkbox-item">
              <u-checkbox-group
                  placement="row"
                  v-model="indexList"
                  @change="handChangePoint"
              >
                <u-checkbox
                    :customStyle="{marginRight: '10px'}"
                    v-for="(item, index) in currentDataList"
                    activeColor="#f9ae3d"
                    :key="index"
                    :label="item.pointName"
                    :name="item.pointCode"
                >
                </u-checkbox>
              </u-checkbox-group>
            </view>
          </view>
        </view>
        <view class="u-demo-block__content">
          <view class="chart-title" >
            <u--text  :text="`${info.xmmc}-${info.facilities_type_name}`" :block="true"  customStyle="width:70vw;textAlign:center" :lines="2" align="center" :bold="true"  ></u--text>
          </view>
          <view class="u-form_content">
            <view class="charts-box">
              <qiun-data-charts
                  type="area"
                  :loadingType='loadingType'
                  :opts="opts"
                  :chartData="chartData"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-datetime-picker :show="startTimeshow"  v-model="queryParam.start"  @cancel="startTimeshow=false" @confirm="timeconfirm('start')"
                       mode="datetime"></u-datetime-picker>
    <u-datetime-picker :show="endTimeShow"  v-model="queryParam.end"   @cancel="endTimeShow=false" @confirm="timeconfirm('end')"
                       mode="datetime"></u-datetime-picker>
  </view>
</template>

<script>
import {
  getHisAggData,
  getFactiesData
} from '@/common/api.js';
export default {
  props:['info'],
  data() {
    return {
      startTimeshow:false,
      endTimeShow:false,
      chartData: {},
      queryParam: {
        siteId: '',
        start: Number(new Date())- 2*60*60*1000,
        end: Number(new Date()),
        aggregation: 'first',
        index: '',
        interval: 'm',
        value: '5',
      },
      selfTimeDuring:{
        start: '',
        end: '',
      },
      currentDataList:[],
      indexList:[],
      loadingType:'1',
      opts: {
        color: ["#00FCF0"],
        padding: [15,15,0,15],
        enableScroll: false,
        legend: {},
        dataLabel: false,
        dataPointShape: false,
        xAxis: {
          disableGrid: true,
          labelCount:3,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          tofix:2
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      },
      dateDruingList: [{
        checked: true,
        text: '2小时',
        code: '2'
      },
        {
          checked: false,
          text: '6小时',
          code: '6'

        },
        {
          checked: false,
          text: '12小时',
          code: '12'
        },
        {
          checked: false,
          text: '24小时',
          code: '24'
        },
        {
          checked: false,
          text: '48小时',
          code: '48'
        }
      ],
      radiolist1: [{
        name: '水位',
        disabled: false
      },
        {
          name: '溶解氧',
          disabled: false
        },
        {
          name: '氨氮',
          disabled: false
        }, {
          name: '总磷',
          disabled: false
        }, {
          name: '总氮',
          disabled: false
        }
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: '苹果',
    }
  },
  methods: {
    goBack() {
      if(this.showQuery){
        this.showQuery =false;
      }else{
        uni.navigateBack();
      }
    },
    hideKeyboard() {
      uni.hideKeyboard()
    },
    timeconfirm(e){
      const timeFormat = uni.$u.timeFormat;
      if(e=='start'){
        this.selfTimeDuring.start= timeFormat(this.queryParam.start, 'yyyy-mm-dd hh:MM');
        this.startTimeshow=false;
      }
      if(e=='end'){
        this.selfTimeDuring.end=  timeFormat(this.queryParam.end, 'yyyy-mm-dd hh:MM');
        this.endTimeShow=false;
      }

      if(this.selfTimeDuring.start&& this.selfTimeDuring.end){
        this.getHistoryData();
      }
    },
    async getHistoryData() {
      try {
        const param =this.queryParam;
        if(!param.start||!param.end){
          return;
        };
        const timeFormat = uni.$u.timeFormat;
        param.start= timeFormat(this.queryParam.start, 'yyyy-mm-dd hh:MM:ss');
        param.end= timeFormat(this.queryParam.end, 'yyyy-mm-dd hh:MM:ss');
        const  indexs= this.indexList;
        const data= {
          categories: [],
          series: []
        };
        for (let index of indexs) {
          param.index = index;
          const site = this.currentDataList.find(item => item.pointCode ==index);
          const name =site?.pointName;
          param.siteId= site?.siteId;
          const result= await getHisAggData(param);
          if(result){
            const serie ={
              name: name,
              data: []
            }
            const categories =[];
            result.forEach(item => {
              categories.push(item.time.substr(5));
              serie.data.push(item.value);
            });
            data.series.push(serie);
            data.categories =categories;
          }
        }
        this.chartData =data;
      } catch (error) {
        // 处理请求失败的逻辑
        console.error(error);
      }

    },
    handChangePoint(n) {
      this.indexList = n;
      this.getHistoryData();
    },
    async  getMonitordata() {
      try {
        this.loadingType=1;
        const result = await getFactiesData({id:this.info.id});
        if (Object.keys(result).length !== 0) {
          let currentDatas = [];
          let indexList = [];
          for (let item in result) {
            for (let datas of result[item]) {
              currentDatas= currentDatas.concat(datas.appMonitorPointDataDtoList);
            }
          }
          this.currentDataList =currentDatas;
          this.indexList.push(this.currentDataList[0].pointCode);
          this.getHistoryData();
        }else{
          uni.$u.toast('设施下暂无数据');
          this.loadingType=0;
        }
      } catch (error) {
        // 处理请求失败的逻辑
        console.error(error);
      }
    },
    handDateClick(name) {
      this.dateDruingList.map((item, index) => {
        item.checked = index === name ? true : false
      })
      this.queryParam.start =  Number(new Date())- this.dateDruingList[name].code*60*60*1000;
      this.queryParam.end = Number(new Date());
      this.getHistoryData();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getMonitordata();
    });
  },
	onShow(){
		document.body.style.overflow = 'auto';
	}

};
</script>
<style lang="scss" scoped>
.status_bar {
  background-color: #FF5000;
  height: var(--status-bar-height);
  width: 100%;
}
.u-title {
  background-color: #FF5000;
  text-align: center;
}
.u-block{
  padding: 10rpx;
  .title{
    font-weight: bold;
    padding: 20rpx 10rpx
  }
  .content{
    padding-top: 10rpx;
  }
  .sub-title{
    margin: 30rpx 10rpx;
  }
  .chart-title{
    margin: 50rpx 0 0 10rpx;
  }
  .u-form_content{
    margin: 20rpx 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .u-page__tag-item {
    margin-right: 5rpx;
    width: 18%;
  }
  .charts-box {
    width: 100%;
    height:500rpx;
  }
}

</style>
